<template>
  <div class="main-app">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="联单编号:">
          <el-input v-model="formInline.number" clearable />
        </el-form-item>
        <el-form-item label="转运日期:">
          <div class="block">
            <el-date-picker v-model="formInline.transportTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" format="yyyy 年 MM 月 dd 日"
            />
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="show-result">
      
      <!-- 加载动态菜单 -->
      <el-form :inline="true" class="form-inline">
        <el-form-item v-for="item in toolbtn" :key="item.id" >
          <el-button type="primary" :icon='item.meta.icon' @click="showViews(item.name)">
            {{ item.meta.title }}
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- <el-form :inline="true" class="form-inline">
        <el-button type="primary" icon="el-icon-view" :disabled="disabled" @click="view">
          查看详情
        </el-button>
        <el-button type="primary" icon="el-icon-view" :disabled="disabled" @click="view_HwList">
          查看废物列表
        </el-button>
      </el-form> -->

      <div class="result">
        <el-table ref="multipleTable" v-loading="loading" border :data="tableData" tooltip-effect="dark"
                  style="width: 100%" @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="singleCopyNumber" label="转移单号" />
          <el-table-column prop="batchLabel" label="出库批号" />
          <el-table-column prop="collectionName" label="处置单位" />
          <el-table-column prop="collectionAddress" label="处置单位地址" />
          <el-table-column prop="collectionContactsName" label="联系人" />
          <el-table-column prop="collectionContactsPhone" label="联系人电话" />
          <el-table-column prop="hwSumCount" label="容器总数量" />
          <el-table-column prop="totalOutWeight" label="废物总重量 (吨)" />
          <el-table-column prop="createTime" label="运输时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | parseDate }}
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next,sizes"
                         :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>

    <div class="dialog_diy">
      <el-dialog :visible.sync="dialogVisible" width="70%" style="margin-top: -100px;">
        <div slot="title" style="background:#1890FF;color: white;">
          <div style="padding:15px 20px;">转移联单详情</div>
        </div>
        <el-form ref="form" :model="form" label-width="200px">

          <el-divider content-position="left">第一部分 基础单位</el-divider>
          <el-row style="margin-top: 10px">
            <el-col :span="12">
              <el-form-item label="转移单号:">{{ form.singleCopyNumber }}</el-form-item>
              <el-form-item label="产废单位名称:"> {{ form.orgName }} </el-form-item>

              <el-form-item label="外运目的:"> {{ form.hwDisposalMethod }} </el-form-item>
              <el-form-item label="转移容器总数量:"> {{ form.hwSumCount }} </el-form-item>
              <el-form-item label="发运人:"> {{ form.createUserName }} </el-form-item>
              <el-form-item label="转运时间:"> {{ form.createTime }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库批号:"> {{ form.batchLabel }} </el-form-item>
              <el-form-item label="通讯地址:"> {{ form.collectionAddress }} </el-form-item>

              <el-form-item label="运达地:"> {{ form.collectionAddress }} </el-form-item>

              <el-form-item label="转移总重量（吨）:"> {{ form.totalOutWeight }} </el-form-item>

              <el-form-item label="发运人手机:"> {{ form.launchUserPhone }} </el-form-item>

            </el-col>
          </el-row>

          <el-divider content-position="left">第二部分 接受单位</el-divider>
          <el-row style="margin-top: 10px">
            <el-col :span="12">
              <el-form-item label="接受单位名称:"> {{ form.collectionName }} </el-form-item>

              <el-form-item label="联系人:"> {{ form.collectionContactsName }} </el-form-item>
              <el-form-item label="废物处置方式:"> {{ form.hwDisposalMethod }} </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯地址:"> {{ form.collectionAddress }} </el-form-item>
              <el-form-item label="联系人手机:"> {{ form.collectionContactsPhone }} </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: -10px; text-align: center">
            <el-form :inline="true" class="form-inline">
              <el-form-item>
                <el-button @click="cancel">返 回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// Table组件相关逻辑，需要引用
import {
  pageMixin
} from "../../../mixins/index";
import {
  transportFromState,
  // PhysicalProperties,
  // CarType
} from "../../../utils/resource.js";

import {
  GetHWReceiptList,
  GetHWReceipts
} from '../../../api/wastereceipt.js';
import {
  parseTime
} from '../../../utils/index.js';
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },
    parseTransportFromStateType(value) {
      if (value) {
        var obj = transportFromState.find((p) => p.value === `${value}`);
        var label = "";
        if (obj) {
          label = obj.label;
        }
        return label;
      }
    },

  },

  mixins: [pageMixin],
  data() {
    return {
      transportFromStateOption: transportFromState,
      formInline: {
        transportTime: ["", ""],
        number: "",
        name: "",
        codeContent: "",
      },
      form: {},
      dialogVisible: false,
      toolbtn: [] // 列表顶部按钮
    };
  },
  async created() {
    await this.init();
  },
  methods: {
    // 列表顶部功能按钮点击事件
    showViews(action){
      //console.log(action);
      switch(action)
      {
        case '查看详情':
          if(this.ids.length != 1) {
            this.$message.error('此功能仅限操作1条数据！');
            return;
          }
          this.view();
          break;
        case '查看废物列表':
          if(this.ids.length != 1) {
            this.$message.error('此功能仅限操作1条数据！');
            return;
          }
          this.view_HwList();
          break;
      }
    },
    async init() {
      this.tableData = [];
      this.loading = true;
      const {
        data,
        count
      } = await GetHWReceiptList({
        limit: this.pageSize,
        page: this.currentPage,
        searchParam: JSON.stringify({
          "Number": this.formInline.number,
          "Name": "",
          "CodeContent": "",
          "StartTime": parseTime(this.formInline.transportTime[0]) === null ? "" : parseTime(this.formInline
            .transportTime[0]).substring(0, 10),
          "EndTime": parseTime(this.formInline.transportTime[1]) === null ? "" : parseTime(this.formInline
            .transportTime[1]).substring(0, 10)
        })

      });
      this.tableData = data;

      this.total = count;
      this.loading = false;
      
      // 初始化按钮数据
      this.toolbtn = JSON.parse(localStorage.getItem('转移联单列表'));
      //console.log(this.toolbtn);
    },
    async GetHWReceipts(Guid) {
      // 并行获取数据
      Promise.all([await GetHWReceipts(Guid)])
        .then((result) => {
          var data = result[0].data;

          if (data) {
            data.createTime = data.createTime === null ? data.createTime : data.createTime.replace("T", " ");

            this.form = data;
            console.log("data", this.form);
          }
        })
    },
    cancel() {
      this.dialogVisible = false;
    },
    view() {
      this.dialogVisible = true;
      this.GetHWReceipts(this.id);
    },
    view_HwList() {
      var obj = this.tableData.find(item => {
        return item.id === this.id;
      })
      if (obj) {
        console.log("选中信息：", obj);
        this.$router.push(`/wastereceipt/orderquery/index_HwList/${obj.singleCopyNumber}`);
      } else {
        this.$message.error('当前数据无效');
      }
    },

    async reset() {
      this.formInline = {
        transportTime: ["", ""],
        number: "",
        name: "",
        codeContent: "",
      };

      await this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
  .result {
    margin-top: 10px;
  }

  .page {
    margin-top: 20px;
    text-align: right;
    margin-bottom: 40px;
  }

  .show-result {
    margin-top: 10px;
  }

  .dialog_diy {
    ::v-deep .el-dialog__wrapper {

      // eslint-disable-line
      .el-dialog {

        .el-dialog__body {
          padding: 0px;
        }

        .el-dialog__header {
          padding: 0px;
        }

        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }

        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
      }
    }
  }
</style>
